<template>
	<view class="page-wrapper">
		<view>
			<button type="warn" @click="handleBack">返回上一页</button>
		</view>
		<view class="page-title">富文本编辑器</view>
		<view>
			<view class="editor-container">
				<editor placeholder="编辑文字" id="editor" class="ql-container" @ready="onEditorReady"></editor>
			</view>
		</view>
		
		<view>
			<view class="form-wrapper">
				<form @submit="formSubmitFun" @reset="resetResetFun">
					<!-- switch开关 -->
					<view class="form-item">
						<view class="form-item-title">switch开关</view>
						<view class="form-item-com">
							<switch checked="true" @change="printfSwitchFun" name="switch"/>
						</view>
					</view>
					<!-- 复选框 -->
					<view class="form-item">
						<view class="form-item-title">
							复选框checkbox
						</view>
						<view class="form-item-com">
							<checkbox-group name="checkBox">
								<label>
									<checkbox value="checkBox_1" /><text>复选框一</text>
								</label>
								<label>
									<checkbox value="checkBox_2" /><text>复选框二</text>
								</label>
							</checkbox-group>
						</view>
					</view>
					<!-- 单选框 -->
					<view class="form-item">
						<view class="form-item-title">
							单选框
						</view>
						<view class="form-item-com">
							<radio-group name="radio">
								<label>
									<radio value="radio_1" /><text>单选一</text>
									<radio value="radio_2" /><text>单选二</text>
								</label>
							</radio-group>
						</view>
					</view>
					<!-- slider -->
					<view class="form-item">
						<view class="form-item-title">
							slider
						</view>
						<view class="form-item-com">
							<slider value="31" name="slider" @change="printfSlider"/>
						</view>
					</view>
					<!-- input -->
					<view class="form-item">
						<view class="form-item-title">
							input
						</view>
						<view class="form-item-com">
							<input type="text" name="input" placeholder="输入框内容" />
						</view>
					</view>
					<!-- picker -->
					<view class="form-item">
						<view class="form-item-title">
							单列选择器
						</view>
						<view class="form-item-com">
							<picker name="picker_1" mode="selector" range-key="content" :value="picker_vlaue_1" :range="picker_1_range" @change="pickerChange">
								<view>{{picker_1_range[0].content}}</view>
							</picker>
						</view>
					</view>
					<!-- picker-time -->
					<view class="form-item">
						<view class="form-item-title">
							时间选择器
						</view>
						<view class="form-item-com">
							<picker name="picker_time" mode="time" :value="picker_time" :start="start_time" :end="end_time" @change="pickerChange">
								<view>{{picker_time}}</view>
							</picker>
						</view>
					</view>
					<!-- 操作按钮 -->
					<view class="form-item">
						<button form-type="submit">Submit</button>
						<button form-type="reset">Reset</button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picker_1_range:[
					{
						id:0,
						content:'悲莫悲兮生别离',
						key:'0',
					},
					{
						id:1,
						content:'乐莫乐兮死相知',
						key:'1',
					},
					{
						id:2,
						content:'春蚕到死丝方尽',
						key:'2',
					},
					{
						id:3,
						content:'蜡炬成灰泪始干',
						key:'3',
					},
				],
				picker_vlaue_1:0,
				start_time:'00:00',
				end_time:'24:00',
				picker_time:'08:00'
			}
		},
		methods: {
			handleBack: function(){
				uni.navigateBack({
					delta:-1,
				})
			},
			onEditorReady: function(){
				uni.createSelectorQuery().select('#editor').context((res) => {
				                    this.editorCtx = res.context
				                }).exec()
			},
			formSubmitFun: function(value){
				console.log('表单提交',value);
			},
			resetResetFun: function(value){
				console.log('表单重置',value);
			},
			printfSwitchFun: function(value){
				console.log('switch开关',value);
			},
			printfSlider: function(value){
				console.log('slider',value);
			},
			pickerChange: function(value){
				console.log('picker_1',value);
			}
		}
	}
</script>

<style lang="scss">
.page-wrapper {
	padding: 0 2%;
}
</style>
